<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />

		<title>课堂视频 详情</title>
		<!--
        	作者：offline
        	时间：2017-08-23
        	描述：课堂视频详情界面，有视屏播放和下面的视频推荐
        -->
		<link rel="stylesheet" href="../css/base.css" />
		<link rel="stylesheet" href="../css/mui.min.css">
		
		

		<style>
			.div-video {
				width: 100%;
				height: 280px;
			  background-color: #FFFFFF;
				color: #FFFFFF;
			}
			
			.width {
				width: 100%;
			}
			
			.img1 {
				width: 50px;
				margin: 10px;
			}
			
			.div2 {
				width: 100px;
				height: 100px;
				background-image: url(../img/bg-01.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			
			.div3 {
				height: 100%;
				background: #a3a3a3;
				filter: alpha(Opacity=60);
				-moz-opacity: 0.3;
				opacity: 0.3;
			}
			
			.div4 {
				background-image: url(../img/play-2.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 70px;
				height: 70px;
				margin: 0 auto;
				text-align: center;
			}
			
			.div5 {
				width: 100%;
				height: 50px;
				padding: 10px;
				background-color: #FFFFFF;
			}
			
			.div5 img {
				height: 35px;
			}
			
			.div6 {
				margin-top: 2%;
				width: 100%;
				height: 50px;
				padding: 10px;
			}
			
			.div6 img {
				float: left;
				height: 35px;
			}
			
			.button1 {
				background-color: #00d5c5;
				float: right;
				color: #FFFFFF;
				width: 100px;
			}
			
			.span3 {
				float: left;
				line-height: 35px;
				color: #00d5c5;
			}
			
			.classroom-container {
				width: 100%;
				background-color: #FFFFFF;
				margin: 0 auto;
				margin-top: 10px;
				padding: 5px;
				padding-right: 3px;
				position: relative;
				height: 120px;
			}
			
			.leftContent {
				position: absolute;
			}
			
			.leftContent img {
				height: 100px;
				width: 100px;
			}
			
			.rightContent {
				margin-left: 120px;
				padding-top: 20px;
			}
			
			.img4 {
				width: 30px;
				float: left;
				margin: 5px;
			}
			
			.float-button {
				position: fixed; //关键	         
				width: 50px;
				top: 20px;
				left: 10px;
				z-index: 2;
			}
			
			/**
			 * 自定义 视频播放示例的样式
			 */
			/**
			 * 设置一个边框与固定宽度
			 */
			#videoContainer {
				
				width: 100%;
				min-height: 200px;
				text-align: center;
				background-color: #000000;
			}
			/**
			 * 控制视频本身
			 * 默认是 高度和宽度时1px,用来隐藏视频,用一张默认的图片替代视频
			 */
			#videoMedia {
				margin-top: 0px;
				width: 1px;
				height:1px;
			}
			/**
			 * 默认图片和videoContainer保持宽高一致
			 */
			#videoContainer img{
				width: 100px;
				max-width: 100%;
				margin-top: 50px;
			}
			#TypeSwitch{
				margin-top: 10px;
				border: 1px solid #3094D2;
				width: 360px;
				max-width: 100%;
			}
			.switchBtn{
				margin: 10px;
			}
			.choosed{
				border: 1px solid #B12D1E;
			}
			
			body {
				background-color: #F6F6F6;
			}
		</style>

	</head>

	<body>
		<div class="mui-content">
			
			<div id="videoContainer">
				<!--
                	让ios支持内联播放,必须添加 webkit-playsinline 标签
                -->
				<video webkit-playsinline id="videoMedia" controls="controls" preload>
					<!--<source src="http://192.168.23.1:8088/Wildlife.mp4" type='video/mp4'>-->
					<!--
                    	这里用的是自己本地的视频,请换位自己本地的
                    -->
					<!--<source src="http://flv2.bn.netease.com/videolib3/1604/28/fVobI0704/SD/fVobI0704-mobile.mp4" type='video/mp4'>-->
					<!--<source id="videoSource" src="" type='video/mp4'></source>
						-->
						
						
					<!--<source src="../../video/Wildlife.webm" type='video/webm'>	-->
					<!--<source src="http://192.168.23.1:8088/Wildlife.mp4" type='video/mp4'>-->
					<!--<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'>-->
					<!--<source src="../video/Wildlife.mp4" type='video/mp4'>
					<source src="../video/Wildlife.webm" type='video/webm'>-->
					<!--http://192.168.23.1:8088/Wildlife.mp4-->
					<p>浏览器不支持Html5 Video!</p>
				</video>
				<img id="videoMediaDefaultImg" src="../img/img_clickToPlay.png" />
			</div>
			
			
			
			<div class="div5">
				<img src="../img/download-no.png" />
				<span class="span3">钢琴学前准备课程</span>
				<button type="button" class="mui-btn mui-btn-outlined button1">收费 <span style="color: #ff0000;"> ￥ 30</span></button>
			</div>
			<div class="div6">
				<img src="../img/icon-vertical.png" />
				<span class="span3">类似视频</span>

			</div>

			<div id="videoDiv" style="width: 100%;position: relative;">
				<!--<div class="classroom-container">

					<div class="leftContent flex-1 div2">
						<div class="flex v-center width div3">
							<div class="div4">
								<img class="img1" src="../img/play-1.png" />
							</div>
						</div>
					</div>

					<div class="rightContent">
						<div style="height: 50px;">
							<span>
					要学习弹钢琴首先要有钱买钢琴jdfgdfhhgfhfghg
				</span>
						</div>

						<div>
							<img class="img4" src="../img/download-no.png" />
							<button type="button" class="mui-btn mui-btn-outlined button1">收费<span style="color: #ff0000;"> ￥ 30</span></button>
						</div>
					</div>
				</div>-->
			</div>
			

		</div>
		<div class="float-button">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left white-color"></a>

		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/zepto.min.js"></script>
		<script type="text/javascript" src="../js/demo_videoPlaySimple.js"></script>
		<script src="../js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		<script>
			mui.init();
			showDetails();

			//初始化界面显示的数据
			function showDetails() {
				//显示视频内容
				var divImg = document.getElementById("videoDiv");
				var div = "";
				for(var i = 0; i < 3; i++) {

					//	div += '<img class="img1" src="'+ e[i] +'"><img onclick="deleteImg('+ i +')" class="img2" src="../img/error-icon.png" /></img>';				    				    	
					div += '<div class="classroom-container" onclick="videoDetails('+ i +')"><div class="leftContent flex-1 div2"><div class="flex v-center width div3"><div class="div4"><img class="img1" src="../img/play-1.png" /></div></div></div><div class="rightContent"><div style="height: 50px;"><span>要学习弹钢琴首先要有钱买钢琴jdfgdfhhgfhfghg</span></div><div><img class="img4" src="../img/download-no.png" /><button type="button" class="mui-btn mui-btn-outlined button1">收费<span style="color: #ff0000;"> ￥ 30</span></button></div></div></div>';
				}
				divImg.innerHTML = div;
			}

			function videoDetails(i) {
				printLog("打开了第" + i);
				mui.openWindow({
					url: "classroom-video.html"
				});
			}
		</script>

	</body>

</html>